<template>
	<view class="index-box">
		<!-- #ifdef MP -->
		<!-- 搜索框在小程序中显示 , .native 是不让子组件触发click事件-->
		<search-input @click.native="navTo('/pages/search/search')"></search-input>
		<!-- #endif -->
		
		<!-- 轮播图 -->
		<banner :bannerList="bannerList"></banner>
		
		<!-- 上拉刷行下拉加载   init是初始化当前实例  down下拉的事件  up上拉加载的事件-->
		 <mescroll-body ref="mescrollRef" 
		 @init="mescrollInit" 
		 @down="downCallback" 
		 @up="upCallback" 
		 :down="downOption" 
		 :up="upOption">
		 
			<!-- 课程分类导航部分 -->
			<cetagory-box :categoryList="categoryList"></cetagory-box>
			
			<!-- 视频课程部分 -->
			<view class="main-container ">
				<!--  子组件传递参数：
				name标题名称  
				word热门关键字  
				column显示的列数  
				rows显示的行数  
				courseData课程数据  
				params点击`全部`按钮要向搜索页传递的查询条件-->
				
				<!-- 热门推荐组件（两行滑动） -->
				<swiper-course name='热门推荐' word="HOT" column=5 rows=2 :courseData="hotCourseList" :params="{sort : 'hot'}"></swiper-course>
				<!-- 近期上新(一行滑动) -->
				<scroll-course name='近期上新' word="NEW"  :courseData="newCourseList" :params="{sort : 'new'}" ></scroll-course>
				<!-- 付款课程（两行滑动） -->
				<swiper-course name='付费课程' word="Pay" column=4 rows=2 :courseData="payCourseList" :params="{courseType :'pay'}"></swiper-course>
				<!--  免费课程(一列滑动) -->
				<list-course name='免费课程' word="Free"  :courseData="freeCourseList"  :params="{courseType :'free'}"></list-course>
				
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	// 搜索框组件
	import searchInput from '@/components/common/search-input.vue'
	// 轮播图组件
	import banner from '@/components/common/banner.vue'
	// 课程分类列表组件
	import cetagoryBox from './components/category-box.vue'
	// 热门推荐组件（两行滑动）
	import swiperCourse from './components/swiper-course.vue'
	// 近期上新(一行滑动)
	import scrollCourse  from './components/scroll-course.vue'
	// 免费课程(一列滑动)
	import listCourse  from './components/list-course.vue'
	// 导入接口文件
	import api from '@/api/index.js'
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	

	export default {
		
		mixins: [MescrollMixin], // 是上拉刷行下拉加载使用的数据
		components: { searchInput, banner, cetagoryBox, swiperCourse, scrollCourse, listCourse},
		
		async onLoad() {
		
			
			
	
		},
		
		data() {
			return {
				bannerList: [], //轮播图数据
				categoryList: [] ,//导航栏分类数据
				hotCourseList: [], //热门课程数据
				freeCourseList: [],//免费课程
				newCourseList: [],//最新课程
				payCourseList: [],//付费课程
				OfflineCourseList:[],//线下课程
				downOption: {  // 下拉刷行的配置数据
					offset: 50 ,// 下拉大于50px,松手即可触发下拉刷新的回调
					textLoading: '亲亲，稍等加载中'
				},
				upOption: {   //上拉加载的配置数据
					textLoading: '亲亲，在查询下页数据中',
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
					},
					textNoMore: '-- 我是有底线的 --', 
				}
			}
		},
		
		// // 监听搜索框点击事件app和h5
		// onNavigationBarSearchInputClicked() {
		// 	// 跳转到搜索页
		// 	this.navTo('/pages/search/search')
		// },
	
		methods: {
			// 查询轮播图数据
			async loadBannerData() {
						  const { data } = await api.getAdvertList(1)
						  this.bannerList = data
						  // console.log('轮播图：', data)
			},
			
			// 查询分类数据
			async loadCateData() {
						   const {data} = await api.getCategoryList()
						   this.categoryList = data
						   // console.log('categoryList', this.categoryList)
			},
			// 查询热门课程数据
			async loadHotCourseData() {
				const { data } = await api.getList({sort:'hot'}, 1, 8)
				this.hotCourseList = data.records
				// console.log('hotCourseList',this.hotCourseList)
			},
			
			// 最新课程数据
			async loadNewCourseData() {
						   const {data} = await api.getList({sort: 'new'}, 1, 10)
						   this.newCourseList = data.records
						   // console.log('newCourseList',this.newCourseList)
			},
			
			// 免费列表
			async loadFreeCourseData() {
						   // 0收费，1免费
						   const {data} = await api.getList({courseType: 'free'}, 1, 8)
						   this.freeCourseList = data.records
						   // console.log('freeCourseList',this.freeCourseList)
			},
			
			// 付费列表数据
			async loadPayCourseData() {
						   // 0收费，1免费
						   const {data} = await api.getList({courseType: 'pay'})
						   this.payCourseList = data.records
						    // console.log('payCourseList',this.payCourseList)
			},
			// 下拉刷新
			// async downCallback(){
				
			// },
			
			// 上拉加载  默认初始化调用page=1 就是页面初始化时会调用一次upCallback
			 async upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				if( pageNum === 1) {
					// 初始化轮播图数据
					this.loadBannerData()
					// 初始化导航分类数据
					this.loadCateData()
					// 获取热门课程数据
					this.loadHotCourseData()	
					// 获取近期上新课程数据
					this.loadNewCourseData()
					// 获取免费课程数据
					this.loadFreeCourseData()
					// 获取付费课程数据
					this.loadPayCourseData()
					// console.log("初始化数据");
				}
				
				// 通过控制给后端的参数pageNum和pageSize获取每页不同的数据
				const { data } = await api.getList({courseType: 'free'}, pageNum, pageSize);
				const curList = data.records;
		
				// 当page是一时初始化免费课程数据,然后每次page+1就会追加到数组freeCourseList
				if( pageNum === 1 ) {
					this.freeCourseList = [];
					}
				this.freeCourseList = this.freeCourseList.concat(curList);
				console.log('上拉加载成功',this.freeCourseList.length);			
				
				// 请求成功，隐藏加载状态  data.total是数据总条数   判断是否数据全部加载完（后台接口有返回列表的总数据量
				this.mescroll.endBySize(curList.length, data.total)	
					
					
			}
			
			
		}
	}
</script>

<style>
	
	.main-container {
		padding: 0 30rpx;
	}
</style>